<template>
  <CommonPage
    :scroll-props="{ pullupEnabled: false, onPulldown }"
    custom-class="jifen-page"
  >
    <div class="jifen-page__content">
      <JifenPanel :points="points" />

      <div class="jifen-page__content-wrapped">
        <CommonCard title="大家都在换">
          <template #action>
            <div class="more-btn" @tap="onGetMore">
              更多
              <div class="more-btn__icon"></div>
            </div>
          </template>
          <CommonGoods :data="goods" @exchange="onExchange" />
        </CommonCard>

        <CommonCard title="健康赚积分">
          <div class="task-list">
            <div
              v-for="item in missionList"
              :key="item.id"
              class="task-list__item"
            >
              <div class="task-list__item-name">
                {{ item.name }}*{{ item.targetCount }}分
              </div>
              <span class="task-list__item-status no" @tap="onSelect(item)"
                >(未完成)</span
              >
            </div>

            <div
              v-for="item in finishMissionList"
              :key="item.id"
              class="task-list__item"
            >
              <div class="task-list__item-name">
                {{ item.name }}*{{ item.targetCount }}分
              </div>
              <span class="task-list__item-status yes">(已完成)</span>
            </div>
          </div>
        </CommonCard>
      </div>
    </div>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/common-page/index.vue";
import CommonCard from "@/components/common-card/index.vue";
import CommonGoods from "@/components/common-goods/index.vue";

import { ref } from "vue";

import JifenPanel from "./components/header-panel.vue";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { apiQueryGoodsRecommend, apiQuerySelfPoints } from "@/apis/jifen";
import { IRecommendGoodsItem } from "@/apis/types/jifen";
import { useExchangeGood } from "@/hooks/useExchangeGood";
import { apiQuerySelfMission } from "@/apis/knowledge";
import { ResponseCodeEnum } from "@/constants/index";
import { ISelfMissionItem } from "@/apis/types/knowledge";

import { DUCUMENT_CATEGORY_ID } from "@/constants/index";
import { useTabBarSelected } from "@/hooks/useTabBarSelected";
defineOptions({
  name: "jifen-page",
});

const { setSelectIndex } = useTabBarSelected();
const points = ref(0);
const { exchangeGood } = useExchangeGood();

const goods = ref<IRecommendGoodsItem[]>([]);
const missionList = ref<ISelfMissionItem[]>([]);
const finishMissionList = ref<ISelfMissionItem[]>();

useLoad(() => {
  querySelfPointsServer();
  queryGoodsRecommendServer();
  querySelfMissionServer();
});

useDidShow(() => {
  setSelectIndex(3);
});

const onPulldown = async (done: Function) => {
  await Promise.all([
    querySelfPointsServer(),
    queryGoodsRecommendServer(),
    querySelfMissionServer(),
  ]);

  done();
};

const onGetMore = () => {
  Taro.navigateTo({
    url: "/packageA/pages/mall/index",
  });
};

const onSelect = (data: ISelfMissionItem) => {
  const { actionRelatedData } = data;
  Taro.setStorageSync(DUCUMENT_CATEGORY_ID, actionRelatedData);
  // Taro.switchTab({
  //   url: `/pages/document/index`,
  // });
};

const onExchange = (id: number) => {
  exchangeGood(id, () => {
    querySelfPointsServer();
    queryGoodsRecommendServer();
  });
};

const queryGoodsRecommendServer = () => {
  apiQueryGoodsRecommend().then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      goods.value = data;
    }
  });
};

const querySelfPointsServer = () => {
  apiQuerySelfPoints().then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      points.value = data.value;
    }
  });
};

const querySelfMissionServer = () => {
  apiQuerySelfMission().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      missionList.value = data.doing;
      finishMissionList.value = data.done;
    }
  });
};
</script>

<style lang="less">
.jifen-page {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  background-image: url("@/assets/jifen/jifen-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  &__content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    &-wrapped {
      width: 100%;
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      padding: 24px 0;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }

      .more-btn {
        padding: 2px 20px;
        background: #ffffff;
        border-radius: 16px;

        font-weight: 400;
        font-size: 20px;
        color: #8b8b8b;
        line-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        &__icon {
          width: 10px;
          height: 10px;
          border-top: 2px solid #8b8b8b;
          border-right: 2px solid #8b8b8b;
          transform: rotate(45deg);
        }
      }

      .task-list {
        width: 100%;
        padding: 24px;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0 0 96px 0 rgba(125, 125, 125, 0.1);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        &__item {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &-name {
            flex: 1;
            width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 400;
            font-size: 26px;
            color: #000000;
          }
          &-status {
            padding: 2px 10px;
            border-radius: 20px;

            font-weight: 400;
            font-size: 22px;

            &.no {
              background-color: #f3f3f3;
              color: #8b8b8b;
            }
            &.yes {
              background-color: #fef2db;
              color: #9d4a0a;
            }
          }
        }
      }
    }
  }
}
</style>
